﻿@model HS.Domain.EF.Promocion

@using HS.Domain.EF;
@using Newtonsoft.Json;
@{
    Layout = null;
}

<div class="row">
    <div class="col-sm-12">
        <ol class="breadcrumb">
            <li><a href="index-2.html#">Promociones</a></li>
            <li><a href="index-2.html#">Configuración</a></li>
            <li class="active">Generar Promoción</li>
        </ol>

        <div class="box">
            <div class="box-header">
                <h2>Editar Promoción</h2>
            </div>

            <div class="toolbar">
                <a id="btn_GuardarPromocion" role="button" class="btn btn-sm btn-primary"><i class="icon-save"></i>&nbsp;Guardar</a>
                <a id="btn_CancelarPromocion" role="button" class="btn btn-sm btn-default"><i class="icon-remove"></i>&nbsp;Cancelar</a>
            </div>

            <div id="PromocionVM" class="box-content">
                <div class="row">
                    <div class="col-sm-12">
                        <ul id="GenerarPromocionTabs" class="nav tab-menu nav-tabs">
                            <li class="active"><a href="#InformacionGeneralTab">Información General</a></li>
                            <li><a href="#CondicionesTab">Condiciones</a></li>
                            <li><a href="#BeneficiosTab">Beneficios</a></li>
                        </ul>

                        <div id="GenerarPromocionTabsContent" class="tab-content">
                            <div class="tab-pane active" id="InformacionGeneralTab">
                                <div class="form-horizontal">
                                    <div class="col-sm-7">
                                        <div class="well" style="height: 300px">
                                            <div class="col-sm-6">
                                                <label>Código</label>
                                                <div class="clear-fix"></div>
                                                <div class="controls col-sm-6 no-padding-left">
                                                    <input id="txt_CodigoPromocion" class="form-control focused align-right" type="text" data-bind="value: Promocion.Codigo" disabled>
                                                </div>
                                            </div>

                                            <div class="col-sm-6">
                                                <div class="space-10"></div>
                                                <div class="col-sm-12">
                                                    <label class="checkbox">
                                                        <input type="checkbox" id="chk_EsAcumulable" data-bind="checked: Promocion.EsAcumulable">
                                                        Promoción No Acumulable
                                                    </label>
                                                </div>
                                            </div>

                                            <div class="clearfix"></div>

                                            <div class="col-sm-12">
                                                <label>Nombre Promoción</label>
                                                <div class="controls">
                                                    <input id="txt_NombrePromocion" class="form-control focused" type="text" placeholder="Ingrese nombre de promoción…" data-bind="value: Promocion.Nombre">
                                                </div>
                                            </div>

                                            <div class="col-sm-12">
                                                <label>Descripción</label>
                                                <div class="controls">
                                                    <textarea id="txt_DescripcionPromocion" rows="4" placeholder="Ingrese descripción…" data-bind="value: Promocion.Descripcion" style="width: 100%; overflow: hidden; word-wrap: break-word; resize: vertical; height: 57px;"></textarea>
                                                </div>
                                            </div>

                                            <div class="col-sm-12 no-padding">
                                                <div class="col-sm-6 no-padding-left">
                                                    <div class="col-sm-12">
                                                        <label>Estado</label>
                                                    </div>
                                                    <div class="col-sm-12">
                                                        <input id="txt_Estado" data-role="dropdownlist" data-auto-bind="false" data-value-primitive="true"
                                                            data-bind="value: Promocion.IdEstadoGeneral, source: estadosGeneralesDS" data-value-field="IdEstadoGeneral" data-text-field="Nombre" style="width: 100%" />
                                                    </div>
                                                </div>

                                                <div class="col-sm-6 no-padding">
                                                    <div class="col-sm-12">
                                                        <label>Prioridad (1 - Mínimo / 10 - Máximo)</label>
                                                    </div>
                                                    <div class="col-sm-12">
                                                        <input id="txt_PrioridadPromocion" class="form-control focused align-right" type="text" data-bind="value: Promocion.Prioridad">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-sm-5">
                                        <div class="well" style="height: 300px">
                                            <div class="col-sm-12">
                                                <div class="col-sm-12 no-padding-left">
                                                    <label class="checkbox">
                                                        <input type="checkbox" id="chk_AsociarCampania">
                                                        Asociar campaña
                                                    </label>
                                                </div>
                                            </div>

                                            <div class="col-sm-12">
                                                <label>Código</label>
                                                <div class="controls">
                                                    <input id="txt_CodigoCampania" class="form-control focused" type="text" data-bind="value: Promocion.Campania.Codigo" disabled>
                                                </div>
                                            </div>

                                            <div class="col-sm-12">
                                                <label>Nombre Campaña</label>
                                                <div class="controls">
                                                    <input id="txt_NombreCampania" class="form-control focused" type="text" data-bind="value: Promocion.Campania.Nombre" disabled>
                                                </div>
                                            </div>

                                            <div class="col-sm-12 align-center">
                                                <div class="space-12"></div>
                                                <a id="btn_ListarCampanias" role="button" class="btn btn-sm btn-primary" disabled><i class="icon-bell"></i>&nbsp;Listar Campañas</a>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-sm-6">
                                        <div class="well" style="height: 130px">
                                            <div class="col-sm-12 no-padding-right align-left">
                                                <label>Inicio</label>
                                                <hr />
                                            </div>

                                            <div class="col-sm-12">
                                                <div class="col-sm-7">
                                                    <label>Fecha</label>
                                                    <input type="text" id="dtp_FechaInicio" data-role="datepicker" data-bind="value: Promocion.FechaInicio">
                                                </div>

                                                <div class="col-sm-5 no-padding">
                                                    <div class="col-sm-12 no-padding">
                                                        <label>Hora</label>
                                                    </div>
                                                    <div class="input-group col-sm-12 no-padding bootstrap-timepicker">
                                                        <span class="input-group-addon"><i class="icon-time"></i></span>
                                                        <input type="text" id="dtm_HoraInicio" class="form-control timepicker" value="11:30 PM" data-bind="value: Promocion.HoraInicio">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-sm-6">
                                        <div class="well" style="height: 130px">
                                            <div class="col-sm-12 no-padding-left align-left">
                                                <label>Fin</label>
                                                <hr />
                                            </div>

                                            <div class="col-sm-12">
                                                <div class="col-sm-7 no-padding-left">
                                                    <label>Fecha</label>
                                                    <input type="text" id="dtp_FechaFin" data-role="datepicker" data-bind="value: Promocion.FechaTermino">
                                                </div>

                                                <div class="col-sm-5 no-padding-left">
                                                    <div class="col-sm-12 no-padding">
                                                        <label>Hora</label>
                                                    </div>
                                                    <div class="input-group col-sm-12 no-padding bootstrap-timepicker">
                                                        <span class="input-group-addon"><i class="icon-time"></i></span>
                                                        <input type="text" id="dtm_HoraFin" class="form-control timepicker" value="11:30 PM" data-bind="value: Promocion.HoraTermino">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="tab-pane" id="CondicionesTab">
                                <div class="form-horizontal">
                                    <div class="col-sm-12">
                                        <label>Lista de Condiciones</label>
                                    </div>

                                    <div class="col-sm-4 no-padding-left">
                                        <div id="grd_TiposCondicionesList" data-role="grid" style="width: auto"
                                            data-bind="source: tiposCondicionesDS"
                                            data-navigatable="true" data-selectable="row" data-sortable="true"
                                            data-columns='[
                                                    { "field": "Nombre",            "title": "Tipo",      "width": "150px" }                      
                                                ]'>
                                        </div>
                                    </div>

                                    <div class="col-sm-8 no-padding-right">
                                        <div id="grd_CondicionCantidadServicios" data-role="grid" style="width: auto"
                                            data-bind="source: condicionesResultDS"  data-height="180"
                                            data-navigatable="true" data-selectable="row" data-sortable="true" data-filterable="true" data-pageable="true" 
                                            data-columns='[
                                                    { "template": "<label style=\"margin-right: 5px\"><i class=\"icon-pencil blue\" onclick=\"EditCondicion(this);\" style=\"cursor:pointer\"></i></label><label><i class=\"icon-trash blue\" onclick=\"DeleteCondicion(this);\" style=\"cursor:pointer\"></i></label>", "width": "3%" },
                                                    { "field": "Codigo",       "title": "Código",              "width": "5%"  },
                                                    { "template": "#=Servicio != null ? Servicio.Nombre : null#",   "title": "Servicio",        "width": "59px" },
                                                    { "template": "#=Subtipo != null ? Subtipo.Nombre : null#",    "title": "Subtipo",         "width": "59px"  },
                                                    { "field": "Cantidad",          "title": "Cant. mínima", "width": "59px"  },
                                                    { "template": "#=CumpleCondicion == true ? \"Si\" : \"No\"#",   "title": "Cumple", "width": "59px"  },
                                                    { "template": "#=MayorCondicion == true ? \"Si\" : \"No\"#",    "title": "Mayor igual", "width": "59px"  }
                                                ]'>
                                        </div>
                                    </div>

                                    <div class="col-sm-8 no-padding-right">
                                        <div id="grd_CondicionMontoServicio" data-role="grid" style="height: 180px; width: auto; display: none"
                                            data-bind="source: condicionesResultDS"
                                            data-navigatable="true" data-selectable="row" data-sortable="true" data-filterable="true" data-pageable="true"
                                            data-columns='[
                                                    { "template": "<label style=\"margin-right: 5px\"><i class=\"icon-pencil blue\" onclick=\"EditCondicion(this);\" style=\"cursor:pointer\"></i></label><label><i class=\"icon-trash blue\" onclick=\"DeleteCondicion(this);\" style=\"cursor:pointer\"></i></label>", "width": "3%" },
                                                    { "field": "Codigo",       "title": "Código",              "width": "5%"  },
                                                    { "template": "#=Servicio != null ? Servicio.Nombre : null#",   "title": "Servicio",        "width": "59px" },
                                                    { "template": "#=Subtipo != null ? Subtipo.Nombre : null#",    "title": "Subtipo",         "width": "59px"  },
                                                    { "field": "Monto",             "title": "Monto", "width": "59px"  },
                                                    { "template": "#=CumpleCondicion == true ? \"Si\" : \"No\"#",   "title": "Cumple", "width": "59px"  },
                                                    { "template": "#=MayorCondicion == true ? \"Si\" : \"No\"#",    "title": "Mayor igual", "width": "59px"  }
                                                ]'>
                                        </div>
                                    </div>

                                    <div class="col-sm-8 no-padding-right">
                                        <div id="grd_CondicionMontoMedioPago" data-role="grid" style="height: 180px; width: auto; display: none"
                                            data-bind="source: condicionesResultDS"
                                            data-navigatable="true" data-selectable="row" data-sortable="true" data-filterable="true" data-pageable="true"
                                            data-columns='[
                                                    { "template": "<label style=\"margin-right: 5px\"><i class=\"icon-pencil blue\" onclick=\"EditCondicion(this);\" style=\"cursor:pointer\"></i></label><label><i class=\"icon-trash blue\" onclick=\"DeleteCondicion(this);\" style=\"cursor:pointer\"></i></label>", "width": "3%" },
                                                    { "field": "Codigo",       "title": "Código",              "width": "5%"  },
                                                    { "template": "#=MedioPago != null ? MedioPago.Nombre : null#",   "title": "Medio Pago",        "width": "59px" },
                                                    { "field": "Monto",             "title": "Monto", "width": "59px"  },
                                                    { "template": "#=CumpleCondicion == true ? \"Si\" : \"No\"#",   "title": "Cumple", "width": "59px"  },
                                                    { "template": "#=MayorCondicion == true ? \"Si\" : \"No\"#",    "title": "Mayor igual", "width": "59px"  }
                                                ]'>
                                        </div>
                                    </div>

                                    <div class="col-sm-8 no-padding-right">
                                        <div id="grd_CondicionVariablePromocional" data-role="grid" style="height: 180px; width: auto; display: none"
                                            data-bind="source: condicionesResultDS"
                                            data-navigatable="true" data-selectable="row" data-sortable="true" data-filterable="true" data-pageable="true"
                                            data-columns='[
                                                    { "template": "<label style=\"margin-right: 5px\"><i class=\"icon-pencil blue\" onclick=\"EditCondicion(this);\" style=\"cursor:pointer\"></i></label><label><i class=\"icon-trash blue\" onclick=\"DeleteCondicion(this);\" style=\"cursor:pointer\"></i></label>", "width": "3%" },
                                                    { "field": "Codigo",       "title": "Código",              "width": "5%"  },
                                                    { "template": "#=VariablePromocional != null ? VariablePromocional.Nombre : null#",   "title": "Variable Promocional",        "width": "59px" },
                                                ]'>
                                        </div>
                                    </div>

                                    <div class="col-sm-8 no-padding-right">
                                        <div id="grd_CondicionMontoTransaccion" data-role="grid" style="height: 180px; width: auto; display: none"
                                            data-bind="source: condicionesResultDS"
                                            data-navigatable="true" data-selectable="row" data-sortable="true" data-filterable="true" data-pageable="true"
                                            data-columns='[
                                                    { "template": "<label style=\"margin-right: 5px\"><i class=\"icon-pencil blue\" onclick=\"EditCondicion(this);\" style=\"cursor:pointer\"></i></label><label><i class=\"icon-trash blue\" onclick=\"DeleteCondicion(this);\" style=\"cursor:pointer\"></i></label>", "width": "3%" },
                                                    { "field": "Codigo",       "title": "Código",              "width": "5%"  },
                                                    { "field": "Monto",             "title": "Monto", "width": "59px"  },
                                                    { "template": "#=CumpleCondicion == true ? \"Si\" : \"No\"#",   "title": "Cumple", "width": "59px"  },
                                                    { "template": "#=MayorCondicion == true ? \"Si\" : \"No\"#",    "title": "Mayor igual", "width": "59px"  }
                                                ]'>
                                        </div>
                                    </div>

                                    <div class="clearfix"></div>

                                    <div class="col-sm-12 align-center">
                                        <div class="space-4"></div>
                                        <button id="btn_AgregarCondicion" class="btn btn-sm btn-primary">Agregar</button>
                                        <button id="btn_EliminarCondicion" class="btn btn-sm btn-default">Eliminar</button>
                                    </div>
                                </div>
                            </div>

                            <div class="tab-pane" id="BeneficiosTab">
                                <div class="form-horizontal">
                                    <div class="col-sm-12">
                                        <label>Lista de Beneficios</label>
                                    </div>

                                    <div class="col-sm-12 no-padding">
                                        <label>Nivel de Beneficio</label>
                                        <input id="ddl_SelBenef_Servicio" data-role="dropdownlist" data-auto-bind="false" data-value-primitive="true"
                                            data-bind="source: nivelesDS" data-value-field="IdNivelBeneficio" data-text-field="Nombre" style="width: 100%" />
                                    </div>

                                    <div class="col-sm-12">
                                        <div id="grd_TiposBeneficiosList" data-role="grid" style="height: 180px; width: auto"
                                            data-bind="source: tiposBeneficiosDS"
                                            data-navigatable="true" data-selectable="row" data-sortable="true"
                                            data-columns='[        
                                                { "field": "Nombre",         "title": "Tipo",       "width": "150px"  }
                                            ]'>
                                        </div>
                                    </div>
                                </div>

                                <div class="row col-sm-12 align-center">
                                    <div class="space-4"></div>
                                    <button id="btn_AgregarBeneficio" class="btn btn-sm btn-primary">Agregar</button>
                                    <button id="btn_EliminarBeneficio" class="btn btn-sm btn-default">Eliminar</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @Html.Partial("_SeleccionarCampania")

    @Html.Partial("_SeleccionarCondicion")
    
    <div id="CondicionCantidadServicios"></div>
    <div id="CondicionMontoServicio"></div>
    <div id="CondicionMontoMedioPago"></div>
    <div id="CondicionVariablePromocional"></div>
    <div id="CondicionMontoTransaccion"></div>

    @Html.Partial("_SeleccionarBeneficio")

    <div id="BeneficioServicioGratis"></div>
    <div id="BeneficioMontoDcto"></div>
    <div id="BeneficioPorcentajeDcto"></div>
    <div id="BeneficioPrecioServicioFijo"></div>
</div>

<script>
    var PromocionVM = null,
        PromocionTemp = @Html.Raw(JsonConvert.SerializeObject(Model, new JsonSerializerSettings { ReferenceLoopHandling = ReferenceLoopHandling.Ignore }));
    
    var queryFilter = null;

    $(document).ready(function () {
        SetTabMenusAction();
        SetModalDialogs();
        SetActionForModalDialogs();
        SetFormControls();
        SetOnReady.InputSelectTextFocus();

        PromocionVM = new kendo.observable({
            Promocion: @Html.Raw(JsonConvert.SerializeObject(Model, new JsonSerializerSettings { ReferenceLoopHandling = ReferenceLoopHandling.Ignore })),
            tiposCondicionesDS: AjaxParamsActionPost('@Url.Action("GetEntities", "TipoCondicion")', { 'rowStatus': true }),
            tiposBeneficiosDS: AjaxParamsActionPost('@Url.Action("GetEntities", "TipoBeneficio")', { 'rowStatus': true }),
            estadosGeneralesDS: AjaxParamsActionPost('@Url.Action("GetEntities", "EstadoGeneral")', { 'rowStatus': true }),
            nivelesDS: AjaxParamsActionPost('@Url.Action("GetEntities", "NivelBeneficio")', { 'rowStatus': true }),
            condicionesResultDS: [],
            beneficiosResultDS: [],
            toJSON: function () {
                return kendo.data.ObservableObject.prototype.toJSON.call(this.Promocion);
            },
            toJSONString: function () {
                return JSON.stringify(this.toJSON());
            }
        });

        kendo.bind($('#PromocionVM'), PromocionVM);

        SetDefaultKeyDownAction('.box-content', 'GuardarPromocion');
        SetCondicionesList_click();
        GetTabsData();

        $('#chk_AsociarCampania').click(function () {
            if($('#chk_AsociarCampania').is(':checked')) 
                $('#btn_ListarCampanias').removeAttr('disabled');
            else
                $('#btn_ListarCampanias').attr('disabled', true);
        })

        /*start: Toolbar Actions*/
        $('#btn_GuardarPromocion').click(function () {
            GuardarPromocion();
        });

        $('#btn_CancelarPromocion').click(function () {
            RenderContentHtml('@Url.Action("Search", "Promocion")', '#content');
        });    
        /*end: Toolbar Actions*/

        $('#grd_TiposCondicionesList').data("kendoGrid").dataSource.page(1); 
    });

    function GuardarPromocion() {
        debugger
        if(@ViewBag.State == 1) {
            var result = AjaxModelActionPost('@Url.Action("Create", "Promocion")', PromocionVM.toJSONString());
        } else {
            var result = AjaxParamsActionPost('@Url.Action("Edit", "Promocion")', { model: PromocionVM.toJSONString(), promocionId: PromocionVM.Promocion.get('IdPromocion') });
        }
        
        if (result != null) {
            alert("Promoción guardada correctamente");
            RenderContentHtml('@Url.Action("Search", "Promocion")', '#content');
        } else {
            alert("Error: No se pudo guardar la promoción");
        }
    }

    function EditCondicion(e) {
        debugger;
        var idGrid = $(e).parents('[data-role=grid]').attr('id');
        var grid = $('#' + idGrid).data('kendoGrid');
        var model = grid.dataItem($(e).parent().parent().parent());

        RenderContentHtmlPost(
            '@Url.Action("GetDlgWindowOpen", "Condicion")', 
            { 'model': JSON.stringify(model), 'dlgPartial': idGrid.substr(3) }, 
            '#' + idGrid.substr(4)
        );

        $('#' + idGrid.substr(4)).dialog({
            autoOpen: true, width: 600, modal: true
        });
    }

    function DeleteCondicion(e) {
    }

    function SetModalDialogs() {
        // start: Condiciones
        // Modales de 400px de largo
        $('#dlg_SeleccionarCampania, #dlg_SeleccionarCondicion, #dlg_SeleccionarBeneficio, #dlg_CondicionDiaHora').dialog({
            autoOpen: false, width: 400, modal: true
        });

        // Modales de 600px de largo        
        $('#dlg_CondicionCantidadServicios, #dlg_CondicionMontoMedioPago, #dlg_CondicionMontoServicio, #dlg_CondicionMontoTransaccion, #dlg_CondicionVariablePromocional').dialog({
            autoOpen: false, width: 600, modal: true
        });
        // end: Condiciones

        // start: Beneficios
        // Modales de 400px de largo
        $('#dlg_BeneficioPorcentajeDcto, #dlg_BeneficioPrecioServicioFijo').dialog({
            autoOpen: false, width: 400, modal: true
        });

        // Modales de 600px de largo
        $('#dlg_BeneficioServicioGratis, #dlg_BeneficioMontoDcto').dialog({
            autoOpen: false, width: 600, modal: true
        });
        // end: Beneficios
    }

    function SetActionForModalDialogs() {
        $('#btn_ListarCampanias').click(function () {
            $('#dlg_SeleccionarCampania').dialog('open');
        });

        $('#btn_AgregarCondicion').click(function () {
            $('#dlg_SeleccionarCondicion').dialog('open');
        });

        $('#btn_AgregarBeneficio').click(function () {
            $('#dlg_SeleccionarBeneficio').dialog('open');
        });

        //start: Condiciones
        $('#btn_CondicionCantidadServicios').click(function () {
            $('#dlg_CondicionCantidadServicios').dialog('open');
        });

        $('#btn_CondicionDiaHora').click(function () {
            $('#dlg_CondicionDiaHora').dialog('open');
        });

        $('#btn_CondicionMontoMedioPago').click(function () {
            $('#dlg_CondicionMontoMedioPago').dialog('open');
        });

        $('#btn_CondicionMontoServicio').click(function () {
            $('#dlg_CondicionMontoServicio').dialog('open');
        });

        $('#btn_CondicionMontoTransaccion').click(function () {
            $('#dlg_CondicionMontoTransaccion').dialog('open');
        });

        $('#btn_CondicionVariablePromocional').click(function () {
            $('#dlg_CondicionVariablePromocional').dialog('open');
        });
        //end: Condiciones


        // start: Beneficios
        $('#btn_BeneficioServicioGratis').click(function () {
            $('#dlg_BeneficioServicioGratis').dialog('open');
        });

        $('#btn_BeneficioMontoDcto').click(function () {
            $('#dlg_BeneficioMontoDcto').dialog('open');
        });

        $('#btn_BeneficioPorcentajeDcto').click(function () {
            $('#dlg_BeneficioPorcentajeDcto').dialog('open');
        });

        $('#btn_BeneficioPrecioServicioFijo').click(function () {
            $('#dlg_BeneficioPrecioServicioFijo').dialog('open');
        });
        // end: Beneficios
    }

    function SetFormControls() {
        $('#dtm_HoraInicio, #dtm_HoraFin, #dtm_DiaHora_HoraInicio, #dtm_DiaHora_HoraFin').timepicker();
    }

    function GetTabsData() {
        $('li a[href=#CondicionesTab]').one('mouseup', function () {
            PromocionVM.set('condicionesResultDS', AjaxParamsActionPost('@Url.Action("GetEntities", "Condicion")', { 'rowStatus': true }));
            
            SetGridFilter($('#grd_TiposCondicionesList').find('tbody tr:first').addClass('k-state-selected'));

            $('#grd_TiposCondicionesList').data("kendoGrid").dataSource.page(1);
            $('#grd_CondicionCantidadServicios').data("kendoGrid").dataSource.page(1);
        });
        }

        function SetCondicionesList_click() {
            $('#grd_TiposCondicionesList').on('click', 'tr', function (e) {
                e.preventDefault();
                SetGridFilter($(this));
            });
        }

        function SetGridFilter($this) {
            var grid = $('#grd_TiposCondicionesList').data('kendoGrid');

            if (!($.isEmptyObject(grid.dataItem($this)))) {                
                var item = grid.dataItem($this);
                
                $('#CondicionesTab')
                    .find('[data-role="grid"]')
                    .not('#grd_TiposCondicionesList')
                    .css('display', 'none');

                queryFilter = {
                    filter: { field: "IdTipoCondicion", operator: "eq", value: item.IdTipoCondicion },
                    sort: { field: "IdTipoCondicion", dir: "asc" }
                };

                switch(item.IdTipoCondicion) {
                    case 1: 
                        $('#grd_CondicionCantidadServicios').data("kendoGrid").dataSource.query(queryFilter);
                        $('#grd_CondicionCantidadServicios')
                            .css('display', 'block')
                            .data("kendoGrid").dataSource.page(1); 
                        break;
                    case 2: 
                        $('#grd_CondicionMontoServicio').data("kendoGrid").dataSource.query(queryFilter);
                        $('#grd_CondicionMontoServicio')
                            .css('display', 'block')
                            .data("kendoGrid").dataSource.page(1); 
                        break;
                    case 3: 
                        $('#grd_CondicionMontoMedioPago').data("kendoGrid").dataSource.query(queryFilter);
                        $('#grd_CondicionMontoMedioPago')
                            .css('display', 'block')
                            .data("kendoGrid").dataSource.page(1); 
                        break;
                    case 4: 
                        $('#grd_CondicionVariablePromocional').data("kendoGrid").dataSource.query(queryFilter);
                        $('#grd_CondicionVariablePromocional')
                            .css('display', 'block')
                            .data("kendoGrid").dataSource.page(1); 
                        break;
                    case 5: 
                        $('#grd_CondicionMontoTransaccion').data("kendoGrid").dataSource.query(queryFilter);
                        $('#grd_CondicionMontoTransaccion')
                            .css('display', 'block')
                            .data("kendoGrid").dataSource.page(1); 
                        break;
                };
            } else {
                alert('Debe seleccionar un elemento de la lista');
            }
        }
</script>
